<template>
    <div>
        <div class="good ">
            <img class="login_beij" src="/static/images/login_top.jpeg" alt="">
            <div class="login_box">
                <div class="login_title">

                    <p style="margin-top:10px">以 宠</p>
                    <p>为 本</p>
                </div>
                <div class="login_name">
                    <input type="text" placeholder="输入手机号码">
                </div>
                <div class="login_phone">
                    <input type="text" placeholder="输入验证码">
                    <button type="submit">获取验证码</button>

                </div>
                <div class="login_go">

                    <button type="submit">登 录</button>
                </div>

            </div>
            <div class="login_bottom">
                <span>有你的生活才精彩</span>
            </div>

        </div>

    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    components: {
        card
    },

    data() {
        return {
            iscart: false, //控制购物车有没有数据
            goodList: [
                {
                    cover: "../../images/index_pet8.png",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    count: 1,
                    checked: false
                },
                {
                    cover: "../../images/index_pet7.png",
                    isbn: "9787540455958",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 258,
                    count: 1,
                    checked: false
                }
            ],
            checkAll: false,
            totalCount: 0,
            totalPrice: 0
        };
    },

    created() {
        const logs = wx.getStorageSync("logs") || [];
        this.logs = logs.map(log => formatTime(new Date(log)));
    },
    methods: {
        deleteList(e) {
            const index = e.currentTarget.dataset.index;
            let goodList = this.data.goodList;
            goodList.splice(index, 1);
            this.setData({
                goodList: goodList
            });
            if (!goodList.length) {
                this.setData({
                    iscart: true
                });
            } else {
                this.calculateTotal();
            }
        },

        /**
         * 计算商品总数
         */
        calculateTotal: function() {
            var goodList = this.data.goodList;
            var totalCount = 0;
            var totalPrice = 0;
            for (var i = 0; i < goodList.length; i++) {
                var good = goodList[i];
                if (good.checked) {
                    totalCount += good.count;
                    totalPrice += good.count * good.price;
                }
            }
            totalPrice = totalPrice.toFixed(2);
            this.setData({
                totalCount: totalCount,
                totalPrice: totalPrice
            });
        },

        /**
         * 用户点击商品减1
         */
        subtracttap: function(e) {
            var index = e.target.dataset.index;
            var goodList = this.data.goodList;
            var count = goodList[index].count;
            if (count <= 1) {
                return;
            } else {
                goodList[index].count--;
                this.setData({
                    goodList: goodList
                });
                this.calculateTotal();
            }
        },

        /**
         * 用户点击商品加1
         */
        addtap: function(e) {
            var index = e.target.dataset.index;
            var goodList = this.data.goodList;
            var count = goodList[index].count;
            goodList[index].count++;
            this.setData({
                goodList: goodList
            });
            this.calculateTotal();
        },
        /**
         * 用户选择购物车商品
         */
        checkboxChange: function(e) {
            console.log(
                "checkbox发生change事件，携带value值为：",
                e.detail.value
            );
            var checkboxItems = this.data.goodList;
            var values = e.detail.value;
            for (var i = 0; i < checkboxItems.length; ++i) {
                checkboxItems[i].checked = false;
                for (var j = 0; j < values.length; ++j) {
                    if (checkboxItems[i].isbn == values[j]) {
                        checkboxItems[i].checked = true;
                        break;
                    }
                }
            }

            var checkAll = false;
            if (checkboxItems.length == values.length) {
                checkAll = true;
            }

            this.setData({
                goodList: checkboxItems,
                checkAll: checkAll
            });
            this.calculateTotal();
        },

        /**
         * 用户点击全选
         */
        selectalltap: function(e) {
            // console.log('用户点击全选，携带value值为：', e.detail.value);
            var value = e.detail.value;
            var checkAll = false;
            if (value && value[0]) {
                checkAll = true;
            }

            var goodList = this.data.goodList;
            for (var i = 0; i < goodList.length; i++) {
                var good = goodList[i];
                good["checked"] = checkAll;
            }

            this.setData({
                checkAll: checkAll,
                goodList: goodList
            });
            this.calculateTotal();
        },
        settle: function() {
            wx.navigateTo({
                url: "/pages/settlement/index"
            });
        }
    }
};
</script>

<style>
.login_beij {
    position: absolute;
    top: 1px;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.login_box {
    width: 714rpx;
    height: 756rpx;
    background-color: #ffffff;
    border-radius: 40rpx;
    margin: 45% auto 0 auto;
}
.login_title {
    width: 150rpx;
    height: 149rpx;
    color: #000000;
    background-color: #ffc300;
    border-radius: 75rpx;
    position: relative;
    top: -35px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
}
.login_title p {
    padding-top: 22rpx;
    font-size: 28rpx;
}
.login_name input {
    width: 656rpx;
    height: 94rpx;
    margin: 0 auto;
    color: #505050;
    font-size: 30rpx;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 47rpx;
}
.login_phone {
    display: flex;
}
.login_phone input {
    width: 410rpx;
    height: 94rpx;
    color: 505050;
    font-size: 30rpx;
    border-bottom: 1px solid #d9d9d9;
    margin-left: 30rpx;
}
.login_phone button {
    width: 234rpx;
    height: 94rpx;
    color: #808080;
    background-color: #d9d9d9;
    font-size: 30rpx;
    line-height: 94rpx;
    border-radius: 0;
    margin-bottom: 147rpx;
}
.login_go button {
    width: 651rpx;
    height: 120rpx;
    color: #808080;
    background-color: rgba(217, 217, 217, 1);
    border-radius: 101rpx;
    font-size: 33rpx;
    line-height: 120rpx;
    text-align: center;
}
.login_bottom {
    width: 699rpx;
    height: 56rpx;
    text-align: center;
    margin: 24rpx auto;
}
.login_bottom span {
    letter-spacing: 40rpx;
    color: #fff;
    font-size: 28rpx;
}
</style>
